<template>
  <div class="fw">
    <!-- <div v-for="each_bt in btlist">
      <div
        :class="{
          each_bt_div: true,
          each_bt_div_act: each_bt_div_act == each_bt.name,
        }"
        :style="{
          fontSize: getscalepxc(15),
          backgroundImage: 'url(/configuration/2d/lbtna.png)'
        }"
        @click="btnclick(each_bt)"
      >
        {{ each_bt }}
      </div>
    </div> -->
    <div
      :class="{
        each_bt_div: true,
        each_bt: true,
        each_bt_div_act: each_bt_div_act == btlist[0].name,
      }"
      :style="{
        fontSize: getscalepxc(8),
        padding: getscalepxc(2)  + ' ' + getscalepxc(5),
        color: each_bt_div_act == btlist[0].name ? getfonttitle() : getfontcontent()
      }"
      @click="btnclick(btlist[0])"
    >
      {{ btlist[0].name }}
    </div>
    <div
      :class="{
        each_bt_div1: true,
        each_bt: true,
        each_bt_div_act1: each_bt_div_act == btlist[1].name,
      }"
      :style="{
        fontSize: getscalepxc(8),
        padding: getscalepxc(2) + ' ' + getscalepxc(5),
        color: each_bt_div_act == btlist[1].name ? getfonttitle() : getfontcontent()
      }"
      @click="btnclick(btlist[1])"
    >
      {{ btlist[1].name }}
    </div>
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  mixins: [commonmixins],
  name: "btnlist",
  components: {},
  props: {
    btlist: {
      default: [
        {
          name: "-",
          img: "lt",
        },
        {
          name: "-",
          img: "rt",
        },
      ]
    }
  },
  data() {
    return {
      each_bt_div_act: "小室数据",
      each_bt_divstyle: {
        fontSize: "50px",
        padding: "5px",
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {
    console.log();
    this.each_bt_div_act = this.btlist[0].name
    this.each_bt_divstyle.fontSize = this.getscalepxc(17);
    this.each_bt_divstyle.padding = this.getscalepxc(5);
  },
  methods: {
    btnclick(key) {
      console.log(key);
      this.each_bt_div_act = key.name;
      this.$emit('btnclick',key.name)
      this.$message.success(key.name)
    },
  },
};
</script>
<style lang='scss' scoped>
.each_bt{
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #ffffff;

}
.each_bt_div {
  background-image: url("/configuration/2d/lt.png");
  &:hover {
    // color: red;
    color: #77D2FF!important;
  }
}
.each_bt_div_act {
  background-image: url("/configuration/2d/lth.png");
  &:hover {
    color: #77D2FF!important;
  }
}
.each_bt_div1 {
  background-image: url("/configuration/2d/rt.png");
  &:hover {
    color: #77D2FF!important;
  }
}
.each_bt_div_act1 {
  background-image: url("/configuration/2d/rth.png");
  &:hover {
    color: #77D2FF!important;
  }
}
</style>